<template>
  <t-modal
    :visible="visible"
    width="700px"
    title="导入"
    wrapClassName="importModal-modal-container"
    dialogClass="importModal-modal"
    @cancel="closeModal()"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <div class="import-header">
        <div class="name">
          上传前请先按
          {{ operateType == 1 ? "【模板】" : "【文件】" }} 中的格式编辑内容
        </div>
      </div>
      <div class="choose-file">
        <a-upload-dragger
          v-if="fileList.length == 0"
          name="file"
          :showUploadList="false"
          :beforeUpload="beforeUpload"
        >
          <div class="icon">
            <a-icon type="cloud-upload" />
          </div>
          <div class="upload-tip">
            <span class="text_1">文件拖拽至此区域，或 </span>
            <span class="btn">点击添加</span><br />
          </div>
        </a-upload-dragger>
        <div class="file-list" v-else>
          <div class="icon">
            <a-icon type="cloud-upload" />
            <div class="tip-text" v-if="submitLoading">文件正在上传...</div>
            <div class="tip-text" v-else>请点击【确定】开始上传文件</div>
          </div>
          <div class="file-item">
            <div class="file-icon"></div>
            <div
              class="file-name"
              v-for="(item, index) in fileList"
              :key="index"
            >
              <div class="name">{{ item.fileName }}</div>
              <!-- <div class="progress" v-if="submitLoading">
                <div class="inner" :style="{ width: progress + '%' }"></div>
              </div> -->
            </div>
            <div class="file-close" @click="handelDeleteFile()">
              <a-icon type="close" />
            </div>
          </div>
        </div>
      </div>
      <div class="import-rule">
        <div class="title">导入规则</div>
        <div class="sort" v-if="operateType == 1">
          注：请先下载模板，在模板中按要求填写，然后上传该文件。
        </div>
        <div class="sort" v-if="operateType == 2">
          注：如果需要导入文件调整版本，请先导出计划文件！
        </div>
        <div class="sort" v-if="submitLoading">
          数据导入耗时较长，请耐心等待，请勿刷新页面
        </div>
      </div>
    </div>
    <div class="curve-modal-footer">
      <a-button type="default" @click="closeModal()">取消 </a-button>
      <a-button type="primary" @click="importVerify()" :loading="submitLoading">
        确定
      </a-button>
    </div>
  </t-modal>
</template>

<script>
import { mapGetters } from "vuex";
import { importPlanControl, importVerify } from "@/api/progressManage";
export default {
  inject: ["conditionsSource", "firstIndex", "versionSource"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //操作类型
    operateType: {
      type: Number,
      default: 1,
    },
    type: {
      type: Number,
      default: 0,
    },
    footer: {
      type: Object,
      default() {
        return { footer: null };
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters([""]),
  },
  data() {
    return {
      submitLoading: false,
      fileList: [],
      progress: 0,
      pageModule: "",
    };
  },
  methods: {
    getPageFlag() {
      let { module } = this.$route.query;
      this.pageModule = module;
    },

    //上传文件之前钩子
    beforeUpload(file) {
      let { name, size } = file;
      let lastIdx = name.lastIndexOf(".");
      let fileType = "." + name.substring(lastIdx + 1);
      this.fileList = [
        {
          file,
          fileName: name,
          fileSize: size,
          fileType,
        },
      ];
    },

    handelDeleteFile() {
      this.fileList = [];
      this.progress = 0;
    },

    //验证
    importVerify() {
      if (this.fileList.length == 0) {
        this.$message.error("请选择上传文件");
        return;
      }
      this.submitLoading = true;
      let that = this;
      let { tenantCode, orgCode = "" } = this.conditionsSource();
      let { uuid = "" } = this.versionSource();
      let queryInfo = {
        proCode: tenantCode || "",
        orgCode,
        versionId: uuid,
      };
      const formData = new FormData();
      formData.append("uploadFile", this.fileList[0].file);
      return new Promise((resolve, reject) => {
        importVerify(formData, queryInfo)
          .then((res) => {
            let { data } = res;
            if (data) {
              this.$emit("update:visible", false);
              this.$confirm({
                title: "提示",
                content: data,
                okText: "确定",
                cancelText: "取消",
                icon: () =>
                  this.$createElement("a-icon", {
                    props: {
                      key: "warning",
                      type: "exclamation-circle",
                      twoToneColor: "#faad14",
                    },
                  }),
                onOk() {
                  return that.submit();
                },
                onCancel() {
                  that.submitLoading = false;
                  that.$emit("update:visible", true);
                },
              });
            } else {
              that.submit();
            }
            resolve();
          })
          .catch((_) => {
            that.submitLoading = false;
            reject("");
          })
          .finally((_) => {});
      });
    },

    //提交
    submit() {
      this.submitLoading = true;
      let { tenantCode, orgCode = "" } = this.conditionsSource();
      let { uuid = "" } = this.versionSource();
      let { pageModule } = this;
      let queryInfo = {
        proCode: tenantCode || "",
        orgCode,
        versionId: uuid,
      };
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append("uploadFile", this.fileList[0].file);
        importPlanControl(
          formData,
          queryInfo,
          pageModule == "nb" ? "importDataBeam" : "importData"
        )
          .then((res) => {
            if (res.statusCode === 200 || res === 1) {
              this.$message.success("导入成功");
              this.closeModal();
              //整体刷新
              if (this.operateType == 1) {
                this.firstIndex().getVersionData();
              }
              //树刷新
              if (this.operateType == 2) {
                this.firstIndex().getTreeData();
                this.$emit("ok");
              }
            } else {
              this.fileList = [];
              this.$message.error(res?.message ?? "导入失败");
            }
            resolve();
          })
          .catch(() => {
            this.progress = 0;
            reject();
          })
          .finally((_) => {
            this.submitLoading = false;
          });
      });
    },

    submitApi() {},

    //关闭弹窗
    closeModal() {
      this.fileList = [];
      this.progress = 0;
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.ant-modal-root {
  background: red;
}
/deep/.importModal-modal-container {
  z-index: 99999;
  .ant-modal-mask {
  }
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    height: 400px;
    display: flex;
    flex-direction: column;
    .btn {
      cursor: pointer;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: var(--primary-color);
    }
    .import-header {
      margin-bottom: 16px;
      padding: 0 24px;
      height: 48px;
      background: #f0f2f5;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
      .operate-type-container {
        display: flex;
        .excel {
          display: flex;
          align-items: center;
          .icon {
            margin-right: 8px;
            width: 26px;
            height: 24px;
            background: url("~@/assets/img/fileIcon/xls.png") no-repeat center;
            background-size: 100% 100%;
          }
          &:first-of-type {
            margin-right: 14px;
          }
        }
      }
    }
    .choose-file {
      height: 220px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px dashed #d9d9d9;
      padding: 10px 16px;
      .ant-upload-list-text {
        display: none;
      }
      .ant-upload {
        border: none;
        background: #ffffff;
        .icon {
          position: absolute;
          top: 40px;
          left: 50%;
          transform: translateX(-50%);
          .anticon-cloud-upload {
            color: #d9d9d9;
            font-size: 80px;
          }
        }
        .upload-tip {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          .text_1 {
            font-size: 14px;
            color: #333333;
          }
          .text_2 {
            font-size: 12px;
            color: #666666;
          }
        }
      }

      .file-list {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        .icon {
          text-align: center;
          margin-bottom: 10px;
          .anticon-cloud-upload {
            color: #1677ff;
            font-size: 70px;
          }
          .tip-text {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }
        .file-item {
          width: 100%;
          padding: 12px 10px;
          height: 54px;
          background: rgba(22, 119, 255, 0.05);
          border-radius: 4px 4px 4px 4px;
          display: flex;
          align-items: center;
          .file-icon {
            width: 32px;
            height: 30px;
            background: url("~@/assets/img/fileIcon/xls.png") no-repeat center;
            background-size: 100% 100%;
          }
          .file-name {
            padding: 0 8px;
            flex: 1;
            .name {
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              padding-bottom: 4px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .per {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #1677ff;
              }
            }
            .progress {
              width: 100%;
              height: 6px;
              background: rgba(22, 119, 255, 0.1);
              border-radius: 4px 4px 4px 4px;
              .inner {
                height: 100%;
                background: var(--primary-color);
                border-radius: 4px 4px 4px 4px;
              }
            }
          }
          .file-close {
            .anticon-close {
              cursor: pointer;
              font-size: 20px;
              color: #ff2d2d;
            }
          }
        }
      }
    }

    .import-rule {
      margin: 20px 0 0 0;
      .title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
      }
      .sort {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 10px;
        color: #f5222d;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
  .curve-modal-footer {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
